<template>
  <div>
    <van-nav-bar
      title="商品列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-search
      readonly
      :value="keyword || '搜索商品'"
      right-icon="apps-o"
    >
    </van-search>

    <!-- 排序选项按钮 -->
    <div class="sort-btns">
      <div class="sort-item">综合</div>
      <div class="sort-item">销量</div>
      <div class="sort-item">价格</div>
    </div>

    <!--商品列表-->
    <goods-item v-for="(item,index) in goodList" :key="index" :item="item"></goods-item>
  </div>
</template>

<script>
import GoodsItem from '@/components/GoodsItem.vue'
import { getGoodList } from '@/api/search'

export default {
  name: 'search-list',
  components: {
    GoodsItem
  },
  data () {
    return {
      goodList: []
    }
  },
  computed: {
    keyword () {
      return this.$route.query.search
    }
  },
  created () {
    this.getGoodList()
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    //   获取商品列表
    async getGoodList () {
      const { data: { list } } = await getGoodList(
        {
          goodsName: this.querySearch,
          page: this.page
        }
      )
      this.goodList = list.data
    }
  }
}
</script>

<style>
.sort-btns{
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}
</style>
